<template>
  <div class="user-select-test">
    <div class="header">
      <h2>人员选择组件测试</h2>
      <p>这是优化后的人员选择组件，支持按组织架构筛选人员</p>
    </div>

    <div class="test-section">
      <h3>单选模式</h3>
      <div class="demo-row">
        <a-button type="primary" @click="openSingleSelect">
          选择单个用户
        </a-button>
        <div v-if="selectedSingleUser" class="selected-info">
          已选择：{{ selectedSingleUser }}
        </div>
      </div>
    </div>

    <div class="test-section">
      <h3>多选模式</h3>
      <div class="demo-row">
        <a-button type="primary" @click="openMultipleSelect">
          选择多个用户
        </a-button>
        <div v-if="selectedMultipleUsers.length > 0" class="selected-info">
          已选择 {{ selectedMultipleUsers.length }} 个用户：
          <a-tag 
            v-for="userId in selectedMultipleUsers.slice(0, 3)" 
            :key="userId"
            style="margin: 2px"
          >
            {{ userId }}
          </a-tag>
          <span v-if="selectedMultipleUsers.length > 3">
            等 {{ selectedMultipleUsers.length }} 人
          </span>
        </div>
      </div>
    </div>

    <!-- 用户选择组件 -->
    <UserSelect
      :visible="userSelectVisible"
      :title="userSelectTitle"
      :multiple="userSelectMultiple"
      :model-value="userSelectValue"
      @update:visible="userSelectVisible = $event"
      @update:model-value="handleUserSelect"
      @ok="handleUserSelectOk"
      @cancel="handleUserSelectCancel"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { message } from 'ant-design-vue';
// @ts-ignore
import UserSelect from '@/components/business/UserSelect.vue';

defineOptions({
  name: 'UserSelectTest',
});

// 组件状态
const userSelectVisible = ref(false);
const userSelectTitle = ref('选择用户');
const userSelectMultiple = ref(false);
const userSelectValue = ref<string | string[]>('');

// 选择结果
const selectedSingleUser = ref<string>('');
const selectedMultipleUsers = ref<string[]>([]);

// 打开单选模式
const openSingleSelect = () => {
  userSelectTitle.value = '选择负责人';
  userSelectMultiple.value = false;
  userSelectValue.value = selectedSingleUser.value;
  userSelectVisible.value = true;
};

// 打开多选模式
const openMultipleSelect = () => {
  userSelectTitle.value = '选择团队成员';
  userSelectMultiple.value = true;
  userSelectValue.value = selectedMultipleUsers.value;
  userSelectVisible.value = true;
};

// 处理用户选择
const handleUserSelect = (value: string | string[]) => {
  userSelectValue.value = value;
};

// 处理确认选择
const handleUserSelectOk = (result: string | string[]) => {
  if (userSelectMultiple.value) {
    selectedMultipleUsers.value = result as string[];
    message.success(`已选择 ${selectedMultipleUsers.value.length} 个用户`);
  } else {
    selectedSingleUser.value = result as string;
    message.success('已选择用户');
  }
};

// 处理取消选择
const handleUserSelectCancel = () => {
  message.info('取消选择');
};
</script>

<style lang="less" scoped>
.user-select-test {
  padding: 24px;
  background: #fff;
  border-radius: 8px;

  .header {
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;

    h2 {
      margin: 0 0 8px 0;
      color: #262626;
    }

    p {
      margin: 0;
      color: #8c8c8c;
    }
  }

  .test-section {
    margin-bottom: 32px;

    h3 {
      margin: 0 0 16px 0;
      color: #262626;
      font-size: 16px;
    }

    .demo-row {
      display: flex;
      align-items: center;
      gap: 16px;

      .selected-info {
        padding: 8px 12px;
        background: #f6ffed;
        border: 1px solid #b7eb8f;
        border-radius: 6px;
        color: #52c41a;
        font-size: 14px;
      }
    }
  }
}
</style> 